Y-labels

Creating a custom YAxisLabelsProvider

What is a YAxisLabelsProvider?

The YAxisLabelsProvider interface defines how Y-axis labels appear on the chart.

interface YAxisLabelsProvider {
    readonly getUnorderedLabels: () => LabelGroup[];
    yAxisBoundsProvider?: () => Bounds;
}

interface LabelGroup {
    labels: VisualYAxisLabel[];
    bounds?: Bounds;
    axisState?: YAxisConfig;
}

interface VisualYAxisLabel extends YAxisLabelDrawConfig {
    // this property is used for y label and line by default, if two labels intersects
    // the Y will be recalculated to fill available space
    y: Unit;
    labelText: string;
    mode?: YAxisLabelMode;
    labelType?: YAxisVisualLabelType;
    // this prop is used to specify y line position for label overriding Y recalculation algorithm
    lineY?: number;
    // we may have a lot labels with the same value and we have several cases
    // when we need to define the order of the labels, that's why the labelWeight was introduced.
    // If you're not sure about label weight just set Number.POSITIVE_INFINITY,
    labelWeight?: number;
    description?: string;
    subGroupId?: number; // used to identify linked labels
}

Registering a custom label provider

The following example shows how to create a custom Y-axis label provider and register it with the chart.it.

import React, { useCallback } from 'react';
import {
    LabelGroup,
    YAxisLabelsProvider,
} from '@devexperts/dxcharts-lite/dist/chart/components/y_axis/price_labels/y-axis-labels.model';
import { DemoChart } from '../../../../src/components/DemoChart';
import { ChartBootstrap } from '../../../../src/utils/chart.model';
export class SampleYAxisLabelsProvider implements YAxisLabelsProvider {
    public getUnorderedLabels(): LabelGroup[] {
        const labels: LabelGroup[] = [];
        labels.push({
            labels: [
                {
                    textColor: 'white',
                    bgColor: '#FF00FF',
                    y: 50,
                    labelText: 'Label1',
                    labelType: 'badge',
                    mode: 'label',
                },
                {
                    textColor: 'white',
                    bgColor: '#FF00FF',
                    y: 100,
                    labelText: 'Label2',
                    labelType: 'badge',
                    mode: 'line-label',
                },
            ],
        });
        return labels;
    }
}
export const CreatingLabelsProvider = () => {
    const onChartCreated = useCallback((chart: ChartBootstrap) => {
        chart.yAxis.registerYAxisLabelsProvider(new SampleYAxisLabelsProvider());
    }, []);
    return <DemoChart onChartCreated={onChartCreated} />;
};

Rendered result: